/**
 * Created by huotaol on 2017/5/4.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle";
import * as BuyCarAction from "../../redux/action/BuyCar";
import {refreshBuyCarFilter} from "./BuyCar";


const DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
const data = [];
data.push({name: '默认排序', type: 0, orderBy: 'ASC'});
data.push({name: '价格最高', type: 1, orderBy: 'DESC'});
data.push({name: '价格最低', type: 1, orderBy: 'ASC'});
data.push({name: '里程最短', type: 3, orderBy: 'ASC'});
data.push({name: '车龄最短', type: 4, orderBy: 'DESC'});
data.push({name: '分数最高', type: 2, orderBy: 'DESC'});
data.push({name: '最新发布', type: 0, orderBy: 'DESC'});

class Order extends Component {
    static propTypes = {
        confirm: PropTypes.func,
    };
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {data: data};
        this._renderItem = this._renderItem.bind(this);
    }

    render() {
        return (
            <ListView
                style={[this.props.style,]}
                dataSource={DATA_SOURCE.cloneWithRows(this.state.data)}
                renderRow={this._renderItem}
                renderSeparator={this._renderSeparator}
            />
        );
    }

    _renderItem(item) {
        return <Item item={item} click={() => {
            this.props.confirm();
            this.props.updateFilter({begin: 0, total: 0, orderType: item.type, orderBy: item.orderBy});
            refreshBuyCarFilter();
        }
        }/>
    }

    _renderSeparator() {
        return <View
            style={[CustomStyle.separator]}/>
    }
}


class Item extends Component {
    static propTypes = {
        item: PropTypes.object,
        click: PropTypes.func,
    };

    render() {
        const item = this.props.item;
        return (
            <TouchableOpacity
                activeOpacity={0.8}
                style={[styles.itemContainer, {
                    paddingLeft: CustomStyle.getActualSizeInHorizontal(40),
                    backgroundColor: 'white',
                    flex: 1,
                }]}
                onPress={this.props.click}
            >
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: '#4a3d18',
                    }]}>{item.name}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        height: CustomStyle.getActualSizeInVertical(88),
        backgroundColor: 'white',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        flex: 1,
    },
});

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Order);